div{
    /*border: <width> <style> <color>;*/
    border:1px solid black;
    width: 200px;
    height: 200px;
}
.back-1{
    /*背景颜色设定*/
    background-color: cornflowerblue;
}
.back-2{
    width: 100%;
    font-size: 110px;
    /* css中提供的渐变色函数完成的渐变色生成，最终是以图片形式在页面进行呈现 */
    /*background-color: linear-gradient(red,blue);*/
    /*背景图片设置*/
    /*由上而下渐变*/
    /*background-image: linear-gradient(brown,cornflowerblue);*/
    /*由右向左渐变*/
    /*background-image: linear-gradient(to left,brown,cornflowerblue);*/
    /*由右下向左上渐变*/
    /*background-image: linear-gradient(to top left,brown,cornflowerblue);*/
    /*background-image: linear-gradient(to right,brown,darkorange,darkgreen,cornflowerblue);*/
    background-image: linear-gradient(
            to right,
            brown 0%,
            darkorange 40%,
            darkgreen 80%,
            cornflowerblue 100%
    );
}
.back-3{
    /*从中心点向周围放射渐变*/
    /*background-image: radial-gradient(brown,darkgreen,cornflowerblue);*/
    background-image: radial-gradient( at 0% 20%,brown,darkgreen,cornflowerblue);
}

.back-4{
    background-image: linear-gradient(#6495EDaa,#6495ED22);
}

.back-5{
    width: 100%;
    /*
    使用指定图片构建元素背景
    通过 url(地址) 方式定义图片资源
        => 默认背景图片是自动完成 横向和纵向重复填充
        => 通过 background-repeat 定义重复规则
    元素的背景图片和背景颜色是可以叠加的，但图片叠加层级高于颜色
    背景图片和背景图片也可以叠加
    */
    background-color: olivedrab;
    /*background-image:url("../../assets/img/loading.jpg");*/
    /*background-image:url("../../assets/img/lizard.png");*/
    /*背景图片叠加，先定义的图片层级高于后定义的图片*/
    background-image: url("../../assets/img/lizard.png"),
                    url("../../assets/img/loading.jpg");
    background-repeat: no-repeat;
    /*background-repeat: repeat-x;*/
    /*background-repeat: repeat-y;*/
    /*background-repeat: repeat;*/
}
/* 雪碧图
    以一张完成的图标图片文件记录所有的图标
    开发时通过背景图片设定，只显示一个图片中的图标实现图标选择展示
 */
.back-6{
    /*width: 100%;*/
    width: 28px;
    height: 28px;
    background-image: url("../../assets/img/icons.png");
    background-repeat: no-repeat;
    /*背景图片的原点对齐定位*/
    /*background-position: 0px 0px ;*/
    /*background-position: -148px -80px;*/
}
.back-6.love{
    background-position: -148px -80px;
}
.back-6.love-1{
    /*width: 100%;*/
    width: 60px;
    height: 60px;
    background-position: -348px -240px;
    /*设置背景图片和元素的宽高比例*/
    background-size: 1200% 1200%;
}
.back-7{
    overflow-y: scroll;
    background-image: url("../../assets/img/bg.jpg");
    /*
        背景图片默认不会跟随元素内容的滚动一起发生位置偏移
        通过定义属性 background-attachment:local 实现背景图片和元素内容保持滚动同步
        + background-attachment: local | fiexd | scroll
            + local : 将背景和元素内容进行位置固定
            + scroll : 将背景图片相对于元素本身进行固定
            + fiexd : 将元素背景图片相对于视窗进行固定
    */
    background-attachment: local;
}
.back-8{
    overflow-y: scroll;
    background-image: url("../../assets/img/firefox-logo.svg"),
                    url("../../assets/img/bg.jpg");
    /*背景的图片的滚动功能，可以基于图片的数量和位置单独设置*/
    background-attachment: local , scroll;
}
.title{
    background-image: linear-gradient(to right, red,yellow,red,yellow);
    /*
        background-clip 裁剪背景
            + text 是一个兼容性取值 需要通过 -webkit-background-clip 进行设置
                   基于文字进行背景裁剪
    */
    /*background-clip: text;*/
    -webkit-background-clip: text;
    /*color: rgba(255,255,255,0);*/
    /* transparent 将颜色设置为透明 */
    color: transparent;
}